<template>
    <div class="combox">
      <div class="left">
        <ul>
          <li :class="tabIndex == 0 ? 'click' : ''" @click="changeTabIndex(0)">
            <img
              v-if="tabIndex == 0"
              src="@/assets/image/icon-essential2.png"
              alt="icon"
            />
            <img v-else src="@/assets/image/icon-essential1.png" alt="icon" />
            <span>基本信息</span>
          </li>
          <li :class="tabIndex == 1 ? 'click' : ''" @click="changeTabIndex(1)">
            <img
              v-if="tabIndex == 1"
              src="@/assets/image/icon-seeking2.png"
              alt="icon"
            />
            <img v-else src="@/assets/image/icon-seeking1.png" alt="icon" />
            <span>求职意向</span>
          </li>
          <li :class="tabIndex == 2 ? 'click' : ''" @click="changeTabIndex(2)">
            <img
              v-if="tabIndex == 2"
              src="@/assets/image/icon-education2.png"
              alt="icon"
            />
            <img v-else src="@/assets/image/icon-education1.png" alt="icon" />
            <span>教育经历</span>
          </li>
          <li :class="tabIndex == 3 ? 'click' : ''" @click="changeTabIndex(3)">
            <img
              v-if="tabIndex == 3"
              src="@/assets/image/icon-work2.png"
              alt="icon"
            />
            <img v-else src="@/assets/image/icon-work1.png" alt="icon" />
            <span>工作经历</span>
          </li>
          <li :class="tabIndex == 4 ? 'click' : ''" @click="changeTabIndex(4)">
            <img
              v-if="tabIndex == 4"
              src="@/assets/image/icon-skill2.png"
              alt="icon"
            />
            <img v-else src="@/assets/image/icon-skill1.png" alt="icon" />
            <span>技能特长</span>
          </li>
          <li :class="tabIndex == 5 ? 'click' : ''" @click="changeTabIndex(5)">
            <img
              v-if="tabIndex == 5"
              src="@/assets/image/icon-describe2.png"
              alt="icon"
            />
            <img v-else src="@/assets/image/icon-describe1.png" alt="icon" />
            <span>自我评价</span>
          </li>
        </ul>
      </div>
      <div class="right">
        <h4 style="padding-top: 0">
          <span>基本信息 <a style="font-size: 14px;">(必填)</a></span>
          <a
            href="javascript:;"
            v-if="!isfirst"
            @click="$refs.essential.status = true"
          >
            <img src="@/assets/image/icon-edit.png" alt="icon" />
            <span>编辑</span>
          </a>
        </h4>
        <!-- 基本信息 -->
        <essential
          @save="onEssentialSave"
          ref="essential"
          :isfirst="isfirst"
          :showEdit="isfirst"
          :EditStatus="isfirst"
          :showRemove="false"
          :jsonData="jsonData.essential"
        />
        <!-- 基本信息 Esc -->
        <h4 ref="seeking">
          <span>求职意向 <a style="font-size: 14px;">(必填)</a></span>
          <a
            v-if="jsonData.seeking.length < 5"
            href="javascript:;"
            @click="addSeeking()"
          >
            <img src="@/assets/image/icon-edit.png" alt="icon" />
            <span>添加求职意向</span>
          </a>
        </h4>
        <!-- 求职意向 -->
        <seeking
          v-for="(item, index) in jsonData.seeking"
          :key="'seeking' + index"
          :isfirst="isfirst"
          :EditStatus="isfirst"
          @save="onSeekingSave($event, index)"
          @remove="onSeekingRemove(index)"
          :showRemove="index != 0"
          :jsonData="item"
          :style="index != 0 ? 'margin-top:24px;' : ''"
        />
        <!-- 求职意向 Esc -->
        <h4 ref="education">
          <span>教育经历</span>
          <a
            v-if="jsonData.education.length < 5"
            href="javascript:;"
            @click="addEducation()"
          >
            <img src="@/assets/image/icon-edit.png" alt="icon" />
            <span>添加教育经历</span>
          </a>
        </h4>
        <!-- 教育经历 -->
        <education
          v-for="(item, index) in jsonData.education"
          :key="'education' + index"
          :isfirst="isfirst"
          :EditStatus="isfirst"
          @save="onEducationSave($event, index)"
          @remove="onEducationRemove(index)"
          :showRemove="index != 0"
          :jsonData="item"
          :style="index != 0 ? 'margin-top:24px;' : ''"
        />
        <!-- 教育经历 Esc -->
        <h4 ref="work">
          <span>工作经历</span>
          <a
            v-if="jsonData.work.length < 5"
            href="javascript:;"
            @click="addWork()"
          >
            <img src="@/assets/image/icon-edit.png" alt="icon" />
            <span>添加工作经历</span>
          </a>
        </h4>
        <!-- 工作经历 -->
        <work
          v-for="(item, index) in jsonData.work"
          :key="'work' + index"
          @save="onWorkSave($event, index)"
          :isfirst="isfirst"
          :EditStatus="isfirst"
          @remove="onWorkRemove(index)"
          :showRemove="index != 0"
          :jsonData="item"
          :style="index != 0 ? 'margin-top:24px;' : ''"
        />
        <!-- 工作经历 Esc -->
        <h4 ref="skill">
          <span>技能特长</span>
        </h4>
        <!-- 技能特长 -->
        <skill
          @save="onSkillSave"
          :jsonData="jsonData.skill"
          :isfirst="isfirst"
          :EditStatus="isfirst"
        />
        <!-- 技能特长 Esc -->
        <h4 ref="describe">
          <span>自我评价</span>
        </h4>
        <!-- 自我描述 -->
        <describe
          @save="onDescribeSave"
          :jsonData="jsonData.describe"
          :isfirst="isfirst"
          :EditStatus="isfirst"
        />
        <!-- 自我描述 Esc -->
      </div>
      <Loading v-show="onLoading"></Loading>
    </div>
</template>

<script>
import essential from "./essential.vue";
import seeking from "./seeking.vue";
import education from "./education.vue";
import work from "./work.vue";
import skill from "./skill.vue";
import describe from "./describe.vue";
// 根据身份证号获取年月日
function getBirthdayFromIdCard(idCard) {
  var birthday = "";
  if (idCard != null && idCard != "") {
    if (idCard.length == 15) {
      birthday = "19" + idCard.substr(6, 6);
    } else if (idCard.length == 18) {
      birthday = idCard.substr(6, 8);
    }

    birthday = birthday.replace(/(.{4})(.{2})/, "$1-$2-");
  }

  return birthday;
}
export default {
  components: { essential, seeking, education, work, skill, describe },
  data() {
    return {
      tabIndex: 0,
      resumeNo: "",
      isfirst: false, // 是否是首次
      jsonData: {
        // 基本信息
        essential: {
          name: null,
          sex: null,
          photo: null,
          birthday: null,
          education: null,
          WorkingYears: null,
          region: null,
          address: null,
          identity: null,
          phone: null,
          email: null,
          DisabilityCategory: null,
          DisabilityDescription: null,
          JobStatus: null,
        },
        // 求职意向
        seeking: [
          {
            industry: null,
            maxSalary: null,
            minSalary: null,
            nature: null,
            position: null,
          },
        ],
        // 教育经历
        education: [
          {
            describe: null,
            education: null,
            major: null,
            maxSchool: null,
            minSchool: null,
            name: null,
          },
        ],
        // 工作经历
        work: [
          {
            industry: null,
            maxWork: null,
            minWork: null,
            name: null,
            position: null,
            explain: null,
          },
        ],
        // 技能特长
        skill: null,
        // 自我描述
        describe: null,
        onLoading: false,
      },
    };
  },
  created() {
    this.getResumeInfo(); // 获取用户简历
  },
  mounted() {
    window.addEventListener("scroll", this.dataScroll, false); // 监听页面滚动事件
    this.getUserInfo();
    // this.$set(this.jsonData.essential,'phone',this.$store.state.mobile);
  },
  destroyed() {
    window.removeEventListener("scroll", this.dataScroll);
  },
  methods: {
    dataScroll() {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop > 0 && scrollTop < this.$refs["seeking"].offsetTop - 200) {
        this.tabIndex = 0;
      } else if (
        scrollTop > this.$refs["seeking"].offsetTop - 300 &&
        scrollTop < this.$refs["education"].offsetTop - 300
      ) {
        this.tabIndex = 1;
      } else if (
        scrollTop > this.$refs["education"].offsetTop - 300 &&
        scrollTop < this.$refs["work"].offsetTop - 300
      ) {
        this.tabIndex = 2;
      } else if (
        scrollTop > this.$refs["work"].offsetTop - 300 &&
        scrollTop < this.$refs["skill"].offsetTop - 300
      ) {
        this.tabIndex = 3;
      }
    },
    // 监听点击 并滚动到对应位置
    changeTabIndex(e) {
      this.tabIndex = e;
      // console.log(e);
      let top;
      switch (e) {
        case 1:
          top = this.$refs.seeking.offsetTop - 100;
          break;
        case 2:
          top = this.$refs.education.offsetTop - 100;
          break;
        case 3:
          top = this.$refs.work.offsetTop;
          break;
        case 4:
          top = this.$refs.skill.offsetTop;
          break;
        case 5:
          top = this.$refs.describe.offsetTop;
          break;
        default:
          top = 0;
          break;
      }
      // 监听顶部导航状态
      // if (top > 800) {
      //   top = top - 100;
      // }
      // console.log(top);
      window.scrollTo({
        top,
        behavior: "smooth",
      });
    },
    getUserInfo() {
      this.onLoading = true;
      // this.$store.commit('changonLoading',true);
      this.$ajax({
        url: "/user/userinfo/info/detail",
        method: "post",
        params: {},
      }).then((res) => {
        this.$set(this.jsonData.essential, "name", res.data.name);
        this.$set(
          this.jsonData.essential,
          "birthday",
          getBirthdayFromIdCard(res.data.idNo)
        );
      });
    },
    saveResume() {
      // 求职意向
      let jobList = this.jsonData.seeking;
      let jobIntemJson = [];
      for (let i = 1; i < jobList.length; i++) {
        jobIntemJson.push({
          jobCode: jobList[i].position, //"职位名称",
          trade: jobList[i].industry[jobList[i].industry.length - 1], //"期望行业",
          minSalary: jobList[i].minSalary, //"最低薪资",
          maxSalary: jobList[i].maxSalary, //"最高薪资",
          workAddress: jobList[i].city, //"工作城市"
          workType: jobList[i].nature, //"工作性质 1.全职 2.兼职 3.实习"
        });
      }
      // 工作经历
      let workList = this.jsonData.work;
      let workExperiJson = [];
      for (let i = 1; i < workList.length; i++) {
        workExperiJson.push({
          comName: workList[i].name, //"公司名称",
          postName: workList[i].position, //"岗位名称",
          trade: workList[i].industry[workList[i].industry.length - 1], //"所属行业",
          entryDate: workList[i].minWork, //"入职时间",
          quitDate: workList[i].maxWork, //"离职时间"
          workDesc: workList[i].explain, //"工作描述"
        });
      }
      this.$ajax({
        url: "/entrepreneurial/resumeinfo/save",
        method: "post",
        params: {
          imgCode: this.jsonData.essential.photo.fileList
            ? this.jsonData.essential.photo.fileList[0].response.data
            : this.jsonData.essential.photo,
          email: this.jsonData.essential.email,
          jobStatus: this.jsonData.essential.JobStatus,
          degree: this.jsonData.essential.education,
          politStatus: this.jsonData.essential.identity,
          phone: this.jsonData.essential.phone,
          province: this.jsonData.essential.location[0],
          city: this.jsonData.essential.location[1],
          area: this.jsonData.essential.location[2],
          address: this.jsonData.essential.address,
          workExperiJson: JSON.stringify(workExperiJson),
        },
      }).then((res) => {
        if (res.code == 200) {
          this.getResumeInfo();
        }
      });
    },
    // 获取用户简历
    getResumeInfo() {
      this.onLoading = true;
      this.$ajax({
        url: "/entrepreneurial/resumeinfo/resumeInfo",
        method: "post",
      }).then((res) => {
        if (res.code == 200) {
          this.onLoading = false;
          // 是否是首次
          if (res.data) {
            this.isfirst = false;
            this.resumeNo = res.data.resumeNo;
            this.$store.commit("changeresumeNo", res.data.resumeNo);
            // 基本信息
            this.$set(this.jsonData.essential, "name", res.data.name);
            this.$set(this.jsonData.essential, "sex", res.data.sex);
            this.$set(
              this.jsonData.essential,
              "birthday",
              getBirthdayFromIdCard(res.data.idNo)
            );
            this.$set(
              this.jsonData.essential,
              "DisabilityDescription",
              res.data.descs
            );
            this.$set(
              this.jsonData.essential,
              "DisabilityCategory",
              res.data.disaType
            );
            this.$set(this.jsonData.essential, "photo", res.data.imgCode);
            this.$set(this.jsonData.essential, "phone", res.data.phone);
            this.$set(this.jsonData.essential, "education", res.data.degree);
            this.$set(this.jsonData.essential, "disaType", res.data.disaType);
            this.$set(
              this.jsonData.essential,
              "residenAddress",
              res.data.residenAddress
            );
            this.$set(
              this.jsonData.essential,
              "identity",
              res.data.politStatus
            );
            this.$set(this.jsonData.essential, "email", res.data.email);
            this.$set(this.jsonData.essential, "JobStatus", res.data.jobStatus);
            this.$set(this.jsonData.essential, "workExper", res.data.workExper);
            this.$set(this.jsonData.essential, "location", [
              res.data.province,
              res.data.city,
              res.data.area,
            ]);
            // 技能特长
            if (res.data.specDesc) {
              this.$set(this.jsonData, "skill", res.data.specDesc);
            }
            // 自我描述
            if (res.data.specDesc) {
              this.$set(this.jsonData, "describe", res.data.selfDesc);
            }
            // 求职意向
            if (res.data.jobIntenList && res.data.jobIntenList.length) {
              this.jsonData.seeking = [];
              for (let i = 0; i < res.data.jobIntenList.length; i++) {
                this.jsonData.seeking.push({
                  //  industry:res.data.jobIntenList[i].name,
                  maxSalary: res.data.jobIntenList[i].maxSalary,
                  minSalary: res.data.jobIntenList[i].minSalary,
                  nature: res.data.jobIntenList[i].workType,
                  city: res.data.jobIntenList[i].workAddress,
                  position: res.data.jobIntenList[i].jobCode,
                  tradeName: res.data.jobIntenList[i].tradeName, //期望行业
                  trade: res.data.jobIntenList[i].trade,
                });
                // // this.$set(this.jsonData.seeking[i],'industry',res.data.jobIntenList[i].name); //期望行业
                // this.$set(this.jsonData.seeking[i],'maxSalary',res.data.jobIntenList[i].maxSalary);
                // this.$set(this.jsonData.seeking[i],'minSalary',res.data.jobIntenList[i].minSalary);
                // this.$set(this.jsonData.seeking[i],'nature',res.data.jobIntenList[i].workType);
                // this.$set(this.jsonData.seeking[i],'position',res.data.jobIntenList[i].jobCode);
                // this.$set(this.jsonData.seeking[i],'tradeName',res.data.jobIntenList[i].tradeName);
              }
            }

            // 工作经历
            if (res.data.workExceperList && res.data.workExceperList.length) {
              this.jsonData.work = [];
              for (let i = 0; i < res.data.workExceperList.length; i++) {
                this.jsonData.work.push({
                  name: res.data.workExceperList[i].comName,
                  position: res.data.workExceperList[i].postName,
                  industry: res.data.workExceperList[i].trade,
                  tradeName: res.data.workExceperList[i].tradeName,
                  minWork: res.data.workExceperList[i].entryDate,
                  maxWork: res.data.workExceperList[i].quitDate,
                  explain: res.data.workExceperList[i].workDesc,
                });
                // this.$set(this.jsonData.work[i],'name',res.data.workExceperList[i].comName);
                // this.$set(this.jsonData.work[i],'position',res.data.workExceperList[i].postName);
                // // this.$set(this.jsonData.work[i],'industry',res.data.workExceperList[i].trade); //期望行业
                // this.$set(this.jsonData.work[i],'minWork',res.data.workExceperList[i].entryDate);
                // this.$set(this.jsonData.work[i],'maxWork',res.data.workExceperList[i].quitDate);
                // this.$set(this.jsonData.work[i],'explain',res.data.workExceperList[i].workDesc);
              }
            }
            // 教育经历
            if (res.data.eduExperList && res.data.eduExperList.length) {
              this.jsonData.education = [];
              for (let i = 0; i < res.data.eduExperList.length; i++) {
                this.jsonData.education.push({
                  describe: res.data.eduExperList[i].detail,
                  name: res.data.eduExperList[i].school,
                  major: res.data.eduExperList[i].major,
                  education: res.data.eduExperList[i].degree,
                  minSchool: res.data.eduExperList[i].startDate,
                  maxSchool: res.data.eduExperList[i].endDate,
                });
                // this.$set(this.jsonData.education[i],'describe',res.data.eduExperList[i].detail);
                // this.$set(this.jsonData.education[i],'name',res.data.eduExperList[i].school);
                // this.$set(this.jsonData.education[i],'major',res.data.eduExperList[i].major);
                // this.$set(this.jsonData.education[i],'education',res.data.eduExperList[i].degree);
                // this.$set(this.jsonData.education[i],'minSchool',res.data.eduExperList[i].startDate);
                // this.$set(this.jsonData.education[i],'maxSchool',res.data.eduExperList[i].endDate);
              }
            }
          } else {
            this.isfirst = true;
          }
        } else {
          this.onLoading = false;
        }
      });
    },
    // 提交求职意向
    // 基本信息保存
    onEssentialSave(e) {
      this.$set(this.jsonData, "essential", e);
      this.$ajax({
        url: "/entrepreneurial/resumeinfo/save",
        method: "post",
        params: {
          resumeNo: this.resumeNo,
          sex: this.jsonData.essential.sex,
          imgCode: this.jsonData.essential.photo.fileList
            ? this.jsonData.essential.photo.fileList[0].response.data
            : this.jsonData.essential.photo,
          email: this.jsonData.essential.email,
          jobStatus: this.jsonData.essential.JobStatus,
          degree: this.jsonData.essential.education,
          politStatus: this.jsonData.essential.identity,
          phone: this.jsonData.essential.phone,
          province: this.jsonData.essential.location[0],
          city: this.jsonData.essential.location[1],
          area: this.jsonData.essential.location[2],
          address: this.jsonData.essential.address,
          workExper: this.jsonData.essential.workExper,
          descs: this.jsonData.essential.DisabilityDescription,
          disaType: this.jsonData.essential.DisabilityCategory,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.getResumeInfo();
        }
      });
    },
    // 添加求职意向
    addSeeking() {
      this.jsonData.seeking.push({
        nature: "1",
      });
    },
    // 删除求职意向
    onSeekingRemove(i) {
      this.jsonData.seeking.splice(i, 1);
    },
    // 求职意向保存
    onSeekingSave(e, i) {
      this.$set(this.jsonData.seeking, i, e);
      // console.log(this.jsonData.seeking);
      // 求职经历
      let jobList = this.jsonData.seeking;
      let jobIntemJson = [];
      for (let i = 0; i < jobList.length; i++) {
        if (jobList[i].position) {
          jobIntemJson.push({
            jobCode: jobList[i].position, //"职位名称",
            trade: jobList[i].industry
              ? jobList[i].industry[jobList[i].industry.length - 1]
              : jobList[i].trade.split(",")[0], //"期望行业",
            minSalary: jobList[i].minSalary, //"最低薪资",
            maxSalary: jobList[i].maxSalary, //"最高薪资",
            workAddress: jobList[i].city, //"工作城市"
            workType: jobList[i].nature, //"工作性质 1.全职 2.兼职 3.实习"
          });
          // console.log(jobIntemJson);
        }
      }
      // console.log(jobIntemJson);
      this.$ajax({
        url: "/entrepreneurial/resumeinfo/save",
        method: "post",
        params: {
          resumeNo: this.resumeNo,
          jobIntemJson: JSON.stringify(jobIntemJson),
        },
      }).then((res) => {
        if (res.code == 200) {
          this.getResumeInfo();
        }
      });
    },
    // 添加教育经历
    addEducation() {
      this.jsonData.education.push({});
    },
    // 删除教育经历
    onEducationRemove(i) {
      this.jsonData.education.splice(i, 1);
    },
    // 教育经历保存
    onEducationSave(e, i) {
      // console.log(e);
      this.$set(this.jsonData.education, i, e);
      // 教育经历
      let eduList = this.jsonData.education;
      let eduExperiJson = [];
      for (let i = 0; i < eduList.length; i++) {
        if (eduList[i].name) {
          eduExperiJson.push({
            school: eduList[i].name, //"学校名称"
            major: eduList[i].major, //"专业"
            degree: eduList[i].education, //"最高学历"
            startDate: eduList[i].minSchool, //"入校时间"
            endDate: eduList[i].maxSchool, //"毕业时间"
            detail: eduList[i].describe, //"在校描述"
          });
        }
      }
      this.$ajax({
        url: "/entrepreneurial/resumeinfo/save",
        method: "post",
        params: {
          resumeNo: this.resumeNo,
          eduExperiJson: JSON.stringify(eduExperiJson),
        },
      }).then((res) => {
        if (res.code == 200) {
          this.getResumeInfo();
        }
      });
    },
    // 添加教育经历
    addWork() {
      this.jsonData.work.push({});
    },
    // 删除教育经历
    onWorkRemove(i) {
      this.jsonData.work.splice(i, 1);
    },
    // 教育经历保存
    onWorkSave(e, i) {
      // console.log(e);
      this.$set(this.jsonData.work, i, e);
      // 工作经历
      let workList = this.jsonData.work;
      let workExperiJson = [];
      for (let i = 0; i < workList.length; i++) {
        if (workList[i].name) {
          workExperiJson.push({
            comName: workList[i].name, //"公司名称",
            postName: workList[i].position, //"岗位名称",
            trade: workList[i].industry[workList[i].industry.length - 1], //"所属行业",
            entryDate: workList[i].minWork, //"入职时间",
            quitDate: workList[i].maxWork, //"离职时间"
            workDesc: workList[i].explain, //"工作描述"
          });
        }
      }
      this.$ajax({
        url: "/entrepreneurial/resumeinfo/save",
        method: "post",
        params: {
          resumeNo: this.resumeNo,
          workExperiJson: JSON.stringify(workExperiJson),
        },
      }).then((res) => {
        if (res.code == 200) {
          this.getResumeInfo();
        }
      });
    },
    // 技能特长保存
    onSkillSave(e) {
      // console.log(e);
      this.$set(this.jsonData, "skill", e.text);
      this.$ajax({
        url: "/entrepreneurial/resumeinfo/save",
        method: "post",
        params: {
          resumeNo: this.resumeNo,
          specDesc: this.jsonData.skill,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.getResumeInfo();
        }
      });
    },
    // 技能特长保存
    onDescribeSave(e) {
      // console.log(e);
      this.$set(this.jsonData, "describe", e.text);
      this.$ajax({
        url: "/entrepreneurial/resumeinfo/save",
        method: "post",
        params: {
          resumeNo: this.resumeNo,
          selfDesc: this.jsonData.describe,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.getResumeInfo();
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.combox {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  padding: 20px 0;
  .left {
    width: 200px;
    flex-shrink: 0;
    > ul {
      position: fixed;
      top: 140px;
      width: 200px;
      background-color: #f8f8f8;
      padding: 10px 0;
      li {
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        cursor: pointer;
        transition: all 0.3s;
        &:hover {
          background-color: #fff;
        }
        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          height: 0;
          width: 2px;
          background-color: @theme;
          transition: all 0.3s;
        }
        &.click {
          background-color: #fff;
          color: @theme;
          &::before {
            height: 100%;
          }
        }
        img {
          height: 18px;
          margin-right: 16px;
        }
      }
    }
  }
  .right {
    width: 970px;
    // background-color: aqua;
    margin-left: 30px;
    flex: 1;
    h4 {
      font-size: 22px;
      line-height: 30px;
      padding: 40px 0 16px;
      display: flex;
      justify-content: space-between;

      a {
        img {
          height: 18px;
        }
        span {
          margin-left: 8px;
          color: #666;
          font-size: 13px;
        }
      }
    }
  }
}
/deep/h4 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
